<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/managementLayout.css">
    <script src="${pageContext.request.contextPath}/js/jquery1.12.4.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/js/monitor.js"></script>
    <script src="${pageContext.request.contextPath}/js/slider.js"></script>
    <script src="${pageContext.request.contextPath}/js/vue.js"></script>
    <script src="${pageContext.request.contextPath}/js/axios.min.js"></script>
    <title>课程管理</title>
    <style>
        /*点击删除按钮后弹出的层*/
        .zhezhao {
            display: none;          /* 修改这里可以让遮罩层消失*/
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.7;
            filter: alpha(opacity=70);
            overflow: hidden;
        }
        .remove{
            display: none;       /* 修改这里可以让删除框消失*/
            width: 400px;
            height: 190px;
            position: absolute;
            top: 200px;
            left:500px;
            background: #fff;
            border-radius: 4px;
        }
        .removerChid{
            margin: 4px;
            border: 1px solid #ccc;
        }
        .removerChid h2{
            padding-left: 8px;
            font-size: 14px;
            line-height: 30px;
            margin: 4px 8px;
            border-bottom: 1px solid #99cc33;
        }
        .removeMain{
            margin-top: 38px;
            text-align: center;
            margin-bottom: 30px;
            border-radius: 4px;
        }
        .removeMain a{
            padding: 0 20px;
            display: inline-block;
            height: 30px;
            line-height: 30px;
            border-radius: 4px;
            border: 1px solid #5e8809;
            margin-top: 30px;
            background: #99cc33;
            color: #fff;
        }
        .removeMain a:hover,.removeMain a:active{
            background: #679016;

        }
        /*供应商管理页面-->供应商添加页面*/
        .providerAdd {
            border: 1px solid #9ac70f;
            padding: 20px;
            margin: 20px;
        }

        .providerAdd form {

        }

        .providerAdd div {
            margin-top: 12px;
            margin-bottom: 12px;
        }

        .providerAdd label {
            width: 200px;
            display: inline-block;
            text-align: right;
        }

        .providerAdd input ,.providerAdd select{
            width: 260px;
            height: 30px;
            line-height: 30px;
            border-radius: 4px;
            outline: none;
            padding-left: 10px;
            border: 1px solid #4987c0;
            box-shadow: 1px 1px 1px #99afc4;
        }

        .providerAdd input:focus,.providerAdd select:focus {
            border: 1px solid #0e56a8;
            background: rgba(238, 236, 240, 0.2);
            -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
            -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
            box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
        }

        .providerAdd span {
            margin-left: 20px;
            color: #faca0d;
        }

        /*验证错误*/
        .providerAdd .error span {
            color: red;
        }

        .providerAdd .error input {
            border: 1px solid red;
        }

        /*验证成功*/
        .providerAdd .ok span {
            color: green;
        }

        .providerAdd .ok input {
            border: 1px solid green;
        }

        .providerAddBtn {
            margin-left: 240px;
            padding-top: 20px;
        }

        .providerAddBtn a ,
        .providerAddBtn input[type='submit'],
        .providerAddBtn input[type='button'] {
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 4px;
            border: transparent;
            background: linear-gradient(to bottom, #85c0ec, #6aa7d6, #508dc6, #306fb4, #17559e);
            color: #fff;
            cursor: pointer;
            font-weight: bold;
            font-size: 14px;
            vertical-align: top;
        }

        .providerAddBtn a:active,
        .providerAddBtn a:focus,
        .providerAddBtn a:hover,
        .providerAddBtn input[type='submit']:hover,
        .providerAddBtn input[type='submit']:focus{
            background: linear-gradient(to bottom, #7aaed4, #578bb4, #406e99, #225792, #0d2d54);
        }

        .providerAdd input[type='radio']{
            width: 20px;
            height: 14px;
            line-height:12px;
            border-radius: 4px;
            outline: none;
            padding-left: 10px;
            border: none;
            box-shadow: none;
        }
    </style>
</head>

<body>

<div id="container">
    <section class="public-main">
        <jsp:include page="NavigationUtil.jsp" flush="true"></jsp:include>
<%--        <div class="sidebar public-main-left">--%>
<%--            <ul class="sidebar-menu">--%>
<%--                <!-- <li class="header">主导航</li> -->--%>
<%--                <li class='sidebar-menu-header'>--%>
<%--                    <img src='${pageContext.request.contextPath}/./img/logo.png' />--%>
<%--                    <span>后台管理系统</span>--%>
<%--                </li>--%>
<%--                <li class="treeview">--%>
<%--                    <a href="index.html">--%>
<%--                        <i class="fa fa-dashboard"></i> <span>主  页</span> <i class="fa fa-angle-right pull-right"></i>--%>
<%--                    </a>--%>
<%--                </li>--%>
<%--                <li class="header">后台管理</li>--%>
<%--                <li class="treeview">--%>
<%--                    <a href="#">--%>
<%--                        <i class="fa fa-dashboard"></i> <span>系统管理</span> <i class="fa fa-angle-right pull-right"></i>--%>
<%--                    </a>--%>
<%--                    <ul class="treeview-menu">--%>
<%--                        <li><a href="#"><i class="fa fa-circle-o"></i>用户管理</a></li>--%>
<%--                        <li><a href="#"><i class="fa fa-circle-o"></i>菜单管理</a></li>--%>
<%--                        <li><a href="#"><i class="fa fa-circle-o"></i>角色管理</a></li>--%>
<%--                        <li><a href="#"><i class="fa fa-circle-o"></i>权限管理</a></li>--%>
<%--                    </ul>--%>
<%--                </li>--%>
<%--                <li class="treeview">--%>
<%--                    <a href="#">--%>
<%--                        <i class="fa fa-files-o"></i>--%>
<%--                        <span>课程管理</span>--%>
<%--                        <span class="label label-primary pull-right">4</span>--%>
<%--                    </a>--%>
<%--                    <ul class="treeview-menu" style="display: none;">--%>
<%--                        <li><a href="course.jsp"><i class="fa fa-circle-o"></i> 课程列表</a></li>--%>
<%--                        <li><a href="courseStyle.jsp"><i class="fa fa-circle-o"></i> 分类管理</a></li>--%>
<%--                    </ul>--%>
<%--                </li>--%>
<%--                <li class="treeview">--%>
<%--                    <a href="#">--%>
<%--                        <i class="fa fa-pie-chart"></i>--%>
<%--                        <span>订单管理</span>--%>
<%--                        <i class="fa fa-angle-right pull-right"></i>--%>
<%--                    </a>--%>
<%--                    <ul class="treeview-menu">--%>
<%--                        <li><a href="#"><i class="fa fa-circle-o"></i> 订单详情</a></li>--%>
<%--                        <li><a href="#"><i class="fa fa-circle-o"></i> 支付功能</a></li>--%>
<%--                    </ul>--%>
<%--                </li>--%>
<%--                <li class="treeview">--%>
<%--                    <a href="#">--%>
<%--                        <i class="fa fa-laptop"></i>--%>
<%--                        <span>智能客服</span>--%>
<%--                        <i class="fa fa-angle-right pull-right"></i>--%>
<%--                    </a>--%>
<%--                    <ul class="treeview-menu">--%>
<%--                        <li><a href="#"><i class="fa fa-circle-o"></i> 客服问答</a></li>--%>
<%--                        <li><a href="#"><i class="fa fa-circle-o"></i> 投诉建议</a></li>--%>
<%--                    </ul>--%>
<%--                </li>--%>

<%--                <li class="header">前台管理</li>--%>
<%--                <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>轮播图片</span></a></li>--%>
<%--                <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>课程推荐</span></a></li>--%>
<%--            </ul>--%>
<%--        </div>--%>
        <!-- 主体部分 -->

        <div class="public-main-right">

            <header class="nav-wrapper">
                <div class="main-right-header">
                    <div class="location">
                        <strong>课程管理</strong>
                        <span>课程列表</span>
                    </div>
                    <div class='main-right-header-right'>
                            <span class="">
                                <span style="font-weight: bolder">${thisAccount.roleName}</span>：${thisAccount.realName}
                            </span>

                        <span class="">
                            <a href="${pageContext.request.contextPath}/index.jsp">
                                <c:if test="${thisAccount.head!=''}">
                                    <img src="img/head/${thisAccount.head}" style="width: 25px">
                                </c:if>
                                <c:if test="${thisAccount.head==''}">
                                    <img src="img/head/initial.jpg" style="width: 25px">
                                </c:if>
                            </a>
                        </span>
                        <c:if test="${thisAccount!=null}">
                            <span class=""><a href="${pageContext.request.contextPath}/loginContoller/returnLogin">退出登录</a></span>
                        </c:if>
                        <c:if test="${thisAccount==null}">
                            <span class=""><a href="${pageContext.request.contextPath}/loginContoller/returnLogin">未登录，快快点击登录吧~</a></span>
                        </c:if>
                    </div>

                </div>
            </header >


            <!-- 主体搜索及增加框 -->
            <div class='main-right-content'>


                <form action="${pageContext.request.contextPath}/addCourse">
                    <div class="providerAdd">
                        <div>
                            <label for="cId">序号：</label>
                            <input type="text" name="cId" id="cId" placeholder="序号" />
                            <span>*</span>
                        </div>
                        <div>
                            <label for="courseType.cTid">课程类型：</label>
                            <select name="courseType.cTid">
                                <option value="1">
                                    美食
                                </option>

                                <option value="2" >
                                    IT
                                </option>

                                <option value="3" >
                                    国家
                                </option>

                                <option value="4" >
                                    娱乐
                                </option>

                                <option value="5" >
                                    旅游
                                </option>

                            </select>
                        </div>
                        <div>
                            <label for="teacher.tId">授课老师：</label>
                            <select name="teacher.tId">
                                <option value="1" >
                                    周蓉
                                </option>

                                <option value="2" >
                                    王宗元
                                </option>

                                <option value="3" >
                                    陈宏桥
                                </option>

                                <option value="4" >
                                    蒲萍
                                </option>

                                <option value="5" >
                                    李四
                                </option>

                            </select>
                        </div>
                        <div>
                            <label for="cPic">课程封面：</label>
                            <img class="coursePic" name="cPic" src="${pageContext.request.contextPath}/img/course/course%20(1).jpg"/>
                            <span >*</span>
                        </div>
                        <div>
                            <label for="cName">课程名称：</label>
                            <input type="text" name="cName" id="cName" />
                            <span >*</span>
                        </div>
                        <div>
                            <label for="price">价格：</label>
                            <input type="text" name="price" id="price" />
                        </div>
                        <div>
                            <label>上下架：</label>
                            <select name="state">
                                <option value=1 >
                                    上架
                                </option>

                                <option value=2 >
                                    下架
                                </option>

                                <option value=3 >
                                    审核中
                                </option>

                            </select>
                        </div>
                        <div class="providerAddBtn">
                            <%--                            onclick="javascrtpt:window.location.href='/updateCourse'"--%>
                            <input type="submit" value="保存" />
                            <input type="button" value="返回" onclick="history.back(-1)"/>
                        </div>
                    </div>
                </form>
            </div>
            <footer>
                打牛蛙组教育集团
            </footer>
        </div>




    </section>

</div>

<!-- 每一页需加上slider，否则js动效无法显示 -->
<script src="${pageContext.request.contextPath}/js/slider.js"></script>
<!-- 每一页需加上slider，否则js动效无法显示 -->

<script type="text/javascript">

</script>
</body>

</html>